<template>
	<view>
		<view class="wrap">
			<image src="https://tb.wuyouzhuan888.com/applet-icon/bg.png" class="bg-set" mode=""></image>
			<head-nav-bar :flag="true" :logo="logo" />
			<view class="searchs">
				<u-search @search="search" placeholder-color="rgba(255, 255, 255, 0.5)" :input-style="inputStyle"
					:show-action="false" color="#FFFFFF" height="80" bg-color="rgba(255, 255, 255, 0.2)"
					placeholder="请输入搜索关键词" @change="onInput" :clearabled="false">
				</u-search>
			</view>

			<scroll-view scroll-x="true" class="data-list">
				<view v-for="(item, index) in keywordList" :key="index" class="data-list-item">
					<view class="box" @click="clickKeyword(item.keywordName)">
						<image class="image" src="https://tb.wuyouzhuan888.com/applet-icon/hot.png">
						</image>
						<view class="">
							{{item.keywordName}}
						</view>
					</view>

				</view>
			</scroll-view>
		</view>

		<!-- tab -->
		<!-- <u-sticky bgColor="none" class="u-m-l-10"> -->
		<u-tabs height="60" bg-color="none" font-size="28" active-color="#fff" :bar-style="barSty"
			:active-item-style="ActiveStyle" inactive-color="#fff" name="categoryName" :list="categoryList"
			:current="categoryCurrent" @change="changeCategory">
		</u-tabs>
		<!-- </u-sticky> -->


		<!-- 推荐壁纸 -->
		<cate :list="atlasList" />
		<!-- 加载中提示 -->
		<u-loadmore v-if="!isEmpty" :status="status" color="#fff" icon-color="#fff" font-size="30" margin-top="10"
			margin-bottom="10" />
		<view v-if="isEmpty" class="empty">
			<u-empty color="#A897D9" text="暂无数据" src="https://tb.wuyouzhuan888.com/appleticon/noDate.png"></u-empty>

		</view>
		<view @click="toTop" v-if="scrollTop>60">
			<xuanfu></xuanfu>
		</view>

	</view>

</template>
<script>
	import HeadNavBar from '@/components/headnavbar/index';
	import cate from '@/components/cate/index'
	import xuanfu from '@/components/xuanfu.vue'

	export default {
		components: {
			HeadNavBar,
			cate,
			xuanfu
		},

		data() {

			return {
				scrollTop: 0,
				logo: '',
				ActiveStyle: {
					fontSize: '32rpx',
				},
				barSty: {
					width: '50rpx',
					height: '5rpx',
					background: 'linear-gradient(to right, #05FAFE, #EF44C4)'
				},
				// 关键词列表
				keywordList: [],
				// 分类列表
				categoryList: [],
				// 分类选中
				categoryCurrent: 0,
				// 分类ID
				categoryId: 0,
				// 图集列表
				atlasList: [],
				// 图集总数
				atlasTotal: 0,
				// 页数
				atlasPage: 1,
				// 每页条数
				atlasSize: 10,
				// 加载状态
				status: 'loadmore',
				// 数据为空
				isEmpty: false,

				inputStyle: {
					backgroundColor: 'none'
				},
				keyword: '',
				// 图片后缀

			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad() {
			// this.$u.api.logo.getLogo({}).then(res => {
			// 		this.logo = res.data.logo
			// 	}),
			uni.showLoading({
				title: '加载中...'
			})
			// 获取分类列表
			this.getCategoryList();
			// 获取关键词列表
			this.getKeywordList();
		},
		onShow() {
			this.$u.api.logo.getLogo({}).then(res => {
					this.logo = res.data.logo
				}),
				uni.hideLoading()
		},
		// mounted() {
		// 	uni.hideLoading()
		// },
		// 触底加载
		onReachBottom() {
			let allTotal = this.atlasPage * this.atlasSize;

			if (allTotal < this.atlasTotal) {
				//当前条数小于总条数 则增加请求页数
				this.atlasPage++;
				this.getAtlasList(this.categoryId);
			} else {
				//加载完状态
				this.status = "noMore";
			}
		},
		methods: {
			onInput(e) {
				this.keyword = e
			},
			toTop() {
				if (this.scrollTop > 60) {
					uni.pageScrollTo({
						scrollTop: 0
					})
				}
			},
			// 获取关键词列表
			getKeywordList() {
				this.$u.api.category.getKeywordList().then(res => {
					if (res.code != 200) {
						this.$u.toast(res.msg);
						return;
					}
					this.keywordList = res.data
				})
			},
			// 获取分类列表
			getCategoryList() {
				this.$u.api.category.getList().then(res => {
					if (res.code != 200) {
						this.$u.toast(res.msg);
						return;
					}
					this.categoryList = res.data
					this.categoryId = this.categoryList[this.categoryCurrent].categoryId
					// 获取图集列表
					this.getAtlasList(this.categoryId)
				})
			},
			// 获取图集列表
			getAtlasList(categoryId) {
				this.$u.api.category.getAtlasList({
					categoryId: categoryId,
					page: this.atlasPage,
					rows: this.atlasSize
				}).then(res => {
					if (res.code != 200) {
						this.$u.toast(res.msg);
						return;
					}

					this.atlasTotal = res.data.total;

					if (this.atlasPage > 1) {
						this.atlasList.push(...res.data.list);
					} else {
						this.atlasList = res.data.list
					}

					// 数据为空
					if (this.atlasList.length == 0) {
						this.isEmpty = true
					}

					if (this.atlasSize > res.data.list.length) {
						//加载完状态
						this.status = "noMore";
					}
				})
			},

			// 搜索
			search() {
				this.keyword = this.keyword.replace(/[, ]/g, '');
				if (this.keyword == '') {
					this.$u.toast('请输入搜索内容');
					return
				}
				uni.navigateTo({
					url: "/pages/sys/home_bags/search?keyword=" + this.keyword
				})
				// this.$u.api.code.check({
				// 		code: this.keyword
				// 	})
				// 	.then((res) => {
				// 		if (res.code != 200) {
				// 			this.$u.toast(res.msg);
				// 			return
				// 		}

				// if (res.data != false) {
				// 	let path;
				// 	if (res.data.type == 'mobile') {
				// 		path = '/pages/sys/cate_bags/mobilemore';
				// 	} else if (res.data.type == 'pc') {
				// 		path = '/pages/sys/cate_bags/pcmore';
				// 	} else {
				// 		path = '/pages/sys/cate_bags/biaoqingmore';
				// 	}

				// 	const url = path + '?atlasId=' + res.data.atlasId +
				// 		'&creatorId=' + res.data.creatorId +
				// 		'&accountId=' + res.data.accountId

				// 	uni.redirectTo({
				// 		url: url
				// 	})

				// } else 
				// {
				// uni.navigateTo({
				// 	url: "/pages/sys/home_bags/search?keyword=" + this.keyword
				// })
				// }
				// });

			},
			// 点击关键词
			clickKeyword(keyword) {
				uni.navigateTo({
					url: "/pages/sys/home_bags/search?keyword=" + keyword
				})
			},
			// 点击分类
			changeCategory(index) {
				this.isEmpty = false
				this.categoryCurrent = index;
				// 获取分类ID
				this.categoryId = this.categoryList[this.categoryCurrent].categoryId;
				// 重置加载状态
				this.status = "loading";
				// 重置图集数据
				this.atlasList = [];
				// 重置页数
				this.atlasPage = 1;

				this.getAtlasList(this.categoryId)
			},


		}
	};
</script>
<style scoped lang="scss">
	.wrap {
		margin: 0 32rpx;



	}

	.searchs {
		margin-bottom: 24rpx;

		/deep/ .u-icon__icon {
			font-size: 36rpx;
		}

		/deep/ .u-content {
			padding-left: 35rpx;
		}
	}

	.data-list {
		width: 100%;
		white-space: nowrap;
		margin: 24rpx 0 35rpx 0;
	}

	.data-list-item {
		display: inline-block;
		margin-right: 20rpx;

		.box {
			display: flex;
			align-items: center;
			background: rgba(255, 121, 121, 0.48);
			padding: 0 18rpx 0 0;
			height: 40rpx;
			border-radius: 49rpx;
			font-size: 22rpx;
			font-family: PingFang HK-Light, PingFang HK;
			font-weight: 300;
			color: #FFFFFF;

			.image {
				width: 39rpx;
				height: 40rpx;
			}
		}
	}
</style>